<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="https://github.com/JiHong88" />
    <meta name="keywords" content="wysiwyg,editor,javascript,suneditor,wysiwyg eidtor,rich text editor,html editor,contenteditable,위지위그 에디터 웹에디터">
    <meta name="description" content="Pure javascript wysiwyg web editor" />
    <title>Suneditor</title>
    <!-- bootstrap -->
    <link rel="stylesheet" href="../bootstrap/bootstrap.css" media="all">
    <script type="text/javascript" src="../bootstrap/tether.min.js"></script>
    <script type="text/javascript" src="../bootstrap/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../bootstrap/bootstrap.min.js"></script>
    <!-- main css -->
    <link rel="stylesheet" href="../css/sample.css" media="all">
    <link rel="stylesheet" href="../css/github.css">
    <link rel="stylesheet" href="../css/github-frameworks.css">
    <!-- suneditor -->
    <link href="../../src/css/suneditor.css" rel="stylesheet" type="text/css">
    <script src="../../src/suneditor.js"></script>
    <script>
        $.getJSON('https://api.github.com/repos/JiHong88/SunEditor', function(data) {
            $('#stargazers').html(' Stargazers ' + data.stargazers_count);
        });
    </script>
</head>
<body class="back_categorys" style="min-width:100%; background-color:#000;">
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="../index.html" title="Suneditor"><b>Suneditor</b></a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="getting-started.html" title="Getting started">Getting started</a></li>
                <li><a href="examples.html" style="color:#fff;" title="Examples">Examples</a></li>
                <li><a href="customize.html" title="Customize">Customize</a></li>
                <li><a href="document.html" title="Document">Document</a></li>
                <li>&nbsp;&nbsp;</li>
                <li><a href="//codeload.github.com/JiHong88/SunEditor/zip/master" class="down-icon" title="Download">Download</a></li>
                <li>
                    <a href="https://github.com/JiHong88/SunEditor" target="_blank" id="stargazers" class="github-cat" title="go to github"> Stargazers 00</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="content">
    <article class="markdown-body entry-content" itemprop="text">
        <h4>1. Options Setting</h4>
        <div class="highlight highlight-source-js">
<pre>
<span class="pl-c">// User Options</span>
<span class="pl-s">fontSizeList</span><span class="pl-k">    : </span>Change default font-size List              <span class="pl-ent">default : </span><span class="pl-c1">null</span>
<span class="pl-s">fontList</span><span class="pl-k">        : </span>Change default font-family List            <span class="pl-ent">default : </span><span class="pl-c1">null</span>
<span class="pl-s">addFont</span><span class="pl-k">         : </span>Add a new font                             <span class="pl-ent">default : </span><span class="pl-c1">null</span>
<span class="pl-s">width</span><span class="pl-k">           : </span>The width size of the editor               <span class="pl-ent">default : </span><span class="pl-c1">textarea.offsetHeight</span>
<span class="pl-s">height</span><span class="pl-k">          : </span>The height size of the editor              <span class="pl-ent">default : </span><span class="pl-c1">textarea.style.width || textarea.offsetWidth</span>
<span class="pl-s">display</span><span class="pl-k">         : </span>The display property of suneditor          <span class="pl-ent">default : </span><span class="pl-c1">textarea.style.display || 'block'</span>
<span class="pl-s">videoX</span><span class="pl-k">          : </span>The default width size of the video frame  <span class="pl-ent">default : </span><span class="pl-c1">560</span>
<span class="pl-s">videoY</span><span class="pl-k">          : </span>The default heigth size of the video frame <span class="pl-ent">default : </span><span class="pl-c1">315</span>

<span class="pl-k">imageFileInput</span><span class="pl-k">  : </span>Choose whether to create a file input tag in the image upload window <span class="pl-ent">default : </span><span class="pl-c1">true</span>

<span class="pl-k">imageUrlInput</span><span class="pl-k">   : </span>Choose whether to create a image url input tag in the image upload window <span class="pl-ent">default : </span><span class="pl-c1">true</span>
<span class="pl-k"></span><span class="pl-k">                  </span>If the value of <span class="pl-k">imageFileInput</span> is false, it will be unconditionally true

<span class="pl-k">imageSize</span><span class="pl-k">       : </span>The default width size of the image frame  <span class="pl-ent">default : </span><span class="pl-c1">350</span>

<span class="pl-k">imageUploadUrl</span><span class="pl-k">  : </span>The image upload to server mapping address <span class="pl-ent">default : </span><span class="pl-c1">null</span>
<span class="pl-s"></span><span class="pl-k">                  </span>ex) <span class="pl-c1">"/editor/uploadImage.ajax"</span>
<span class="pl-s"></span><span class="pl-k">                  </span>When not used, it enters base64 data
<span class="pl-s"></span><span class="pl-k">                  </span><span class="pl-k">return type : </span>JSONArray<span class="pl-c1"> [{"SUNEDITOR_IMAGE_SRC":"/download/editorImg/image1.jpg"},</span>
<span class="pl-s"></span><span class="pl-k">                  </span><span class="pl-k">              </span>          <span class="pl-c1"> {"SUNEDITOR_IMAGE_SRC":"/download/editorImg/image2.jpg"}]</span>

<span class="pl-s">buttonList</span><span class="pl-k">      : </span>Defines button list to array               <span class="pl-ent">default :</span> [
                                                                           [<span class="pl-s"><span class="pl-pds">'</span>undo<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>redo<span class="pl-pds">'</span></span>],
                                                                           [<span class="pl-s"><span class="pl-pds">'</span>font<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>fontSize<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>formats<span class="pl-pds">'</span></span>],
                                                                           [<span class="pl-s"><span class="pl-pds">'</span>bold<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>underline<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>italic<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>strike<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>removeFormat<span class="pl-pds">'</span></span>],
                                                                           [<span class="pl-s"><span class="pl-pds">'</span>fontColor<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>hiliteColor<span class="pl-pds">'</span></span>],
                                                                           [<span class="pl-s"><span class="pl-pds">'</span>indent<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>outdent<span class="pl-pds">'</span></span>],
                                                                           [<span class="pl-s"><span class="pl-pds">'</span>align<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>line<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>list<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>table<span class="pl-pds">'</span></span>],
                                                                           [<span class="pl-s"><span class="pl-pds">'</span>link<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>image<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>video<span class="pl-pds">'</span></span>],
                                                                           [<span class="pl-s"><span class="pl-pds">'</span>fullScreen<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>codeView<span class="pl-pds">'</span></span>],
                                                                           [<span class="pl-s"><span class="pl-pds">'</span>preview<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>print<span class="pl-pds">'</span></span>]
                                                                       ]
</pre>
        </div>

        <div class="highlight highlight-source-js"><pre><span class="pl-c1">SUNEDITOR</span>.<span class="pl-en">create</span>(<span class="pl-s"><span class="pl-pds">'</span>sample<span class="pl-pds">'</span></span>,{
            <span class="pl-c"><span class="pl-c">//</span> insert options</span>
            fontSizeList <span class="pl-k">:</span> [
                <span class="pl-c1">8</span>, <span class="pl-c1">10</span>, <span class="pl-c1">14</span>, <span class="pl-c1">18</span>, <span class="pl-c1">24</span>, <span class="pl-c1">36</span>
            ],
            fontList <span class="pl-k">:</span> [
                <span class="pl-s"><span class="pl-pds">'</span>Arial<span class="pl-pds">'</span></span>,
                <span class="pl-s"><span class="pl-pds">'</span>tahoma<span class="pl-pds">'</span></span>,
                <span class="pl-s"><span class="pl-pds">'</span>Courier New,Courier<span class="pl-pds">'</span></span>
            ],
            addFont <span class="pl-k">:</span> [
                <span class="pl-s"><span class="pl-pds">'</span>Times New Roman,Times,serif<span class="pl-pds">'</span></span>,
                <span class="pl-s"><span class="pl-pds">'</span>Trebuchet MS,Helvetica,sans-serif<span class="pl-pds">'</span></span>
            ],
            width <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>450px<span class="pl-pds">'</span></span>,
            height <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>150px<span class="pl-pds">'</span></span>,
            videoX <span class="pl-k">:</span> <span class="pl-c1">360</span>,
            videoY <span class="pl-k">:</span> <span class="pl-c1">115</span>,
            imageSize <span class="pl-k">:</span> <span class="pl-s">150</span>,
            buttonList <span class="pl-k">:</span> [
                [<span class="pl-s"><span class="pl-pds">'</span>font<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>fontSize<span class="pl-pds">'</span></span>],
                [<span class="pl-s"><span class="pl-pds">'</span>image<span class="pl-pds">'</span></span>,
                    <span class="pl-c">// Set the display attribute of the "image" module to "full"</span>
                    {
                        buttonClass:<span class="pl-s"><span class="pl-pds">''</span></span>,
                        title:SUNEDITOR.lang.toolbar.image,
                        dataCommand:<span class="pl-s"><span class="pl-pds">'</span>image<span class="pl-pds">'</span></span>,
                        dataDisplay:<span class="pl-s"><span class="pl-pds">'</span>dialog<span class="pl-pds">'</span></span>,
                        displayOption:<span class="pl-s"><span class="pl-pds">'</span>full<span class="pl-pds">'</span></span>,
                        innerHTML:<span class="pl-s"><span class="pl-pds">'</span>&lt;div class="ico_picture"&gt;&lt;/div&gt;<span class="pl-pds">'</span></span>
                    },
                    <span class="pl-s"><span class="pl-pds">'</span>video<span class="pl-pds">'</span></span>
                ]
            ]
        });</pre>
        </div>
        <p></p>
        <textarea id="exampleOptions" style="width:100%; height:200px;">Options Setting</textarea>

        <h4>2. User Function</h4>
        <div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> suneditor <span class="pl-k">=</span> <span class="pl-c1">SUNEDITOR</span>.<span class="pl-en">create</span>(<span class="pl-s"><span class="pl-pds">'</span>exampleEditor<span class="pl-pds">'</span></span>);

<span class="pl-c">/** Copies the contents of the suneditor into a [textarea] */</span>
<span class="pl-k">function</span> <span class="pl-en">sun_save</span>() {
    <span class="pl-smi">suneditor</span>.<span class="pl-en">save</span>();
    <span class="pl-c1">document</span>.<span class="pl-c1">getElementById</span>(<span class="pl-s"><span class="pl-pds">'</span>frm<span class="pl-pds">'</span></span>).<span class="pl-c1">submit</span>();
};

<span class="pl-c">/** Gets the contents of the suneditor */</span>
<span class="pl-k">function</span> <span class="pl-en">sun_getContent</span>() {
    <span class="pl-k">var</span> content <span class="pl-k">=</span> <span class="pl-smi">suneditor</span>.<span class="pl-en">getContent</span>();
    <span class="pl-en">alert</span>(content);
};

<span class="pl-c">/** Change the contents of the suneditor */</span>
<span class="pl-k">function</span> <span class="pl-en">sun_setContent</span>(<span class="pl-smi">content</span>) {
    <span class="pl-smi">suneditor</span>.<span class="pl-en">setContent</span>(content);
};

<span class="pl-c">/** Add content to the suneditor */</span>
<span class="pl-k">function</span> <span class="pl-en">sun_appendContent</span>(<span class="pl-smi">content</span>) {
    <span class="pl-smi">suneditor</span>.<span class="pl-en">appendContent</span>(content);
};

<span class="pl-c">/** Disable the suneditor */</span>
<span class="pl-k">function</span> <span class="pl-en">sun_disabled</span>() {
    <span class="pl-smi">suneditor</span>.<span class="pl-c1">disabled</span>();
};

<span class="pl-c">/** Enabled the suneditor */</span>
<span class="pl-k">function</span> <span class="pl-en">sun_enabled</span>() {
    <span class="pl-smi">suneditor</span>.<span class="pl-en">enabled</span>();
};

<span class="pl-c">/** Hide the suneditor */</span>
<span class="pl-k">function</span> <span class="pl-en">sun_hide</span>() {
    <span class="pl-smi">suneditor</span>.<span class="pl-en">hide</span>();
};

<span class="pl-c">/** Show the suneditor */</span>
<span class="pl-k">function</span> <span class="pl-en">sun_show</span>() {
    <span class="pl-smi">suneditor</span>.<span class="pl-en">show</span>();
};

<span class="pl-c">/** Destroy the suneditor */</span>
<span class="pl-k">function</span> <span class="pl-en">sun_destroy</span>() {
    <span class="pl-smi">suneditor</span>.<span class="pl-en">destroy</span>();
};

<span class="pl-c">/** Create the suneditor */</span>
<span class="pl-k">function</span> <span class="pl-en">sun_create</span>() {
    </span> suneditor <span class="pl-k">=</span> <span class="pl-c1">SUNEDITOR</span>.<span class="pl-en">create</span>(<span class="pl-s"><span class="pl-pds">'</span>exampleEditor<span class="pl-pds">'</span></span>);
};</pre></div>
        <form id="frm" name="frm">
            <textarea id="exampleFunction" style="width:100%; height:150px;">User Function Test</textarea>
            <p></p>
            <button type="button" class="btn btn-lg btn-primary" onclick="sun_save()">Submit</button>
            <button type="button" class="btn btn-lg btn-danger" onclick="sun_getContent()">GetContent</button>
            <button type="button" class="btn btn-lg btn-danger" onclick="sun_setContent('set content')">SetContent</button>
            <button type="button" class="btn btn-lg btn-danger" onclick="sun_appendContent('append content<br>')">AppendContent</button>
            <button type="button" class="btn btn-lg btn-danger" onclick="sun_disabled()">Disabled</button>
            <button type="button" class="btn btn-lg btn-danger" onclick="sun_enabled()">Enabled</button>
            <button type="button" class="btn btn-lg btn-danger" onclick="sun_hide()">Hide</button>
            <button type="button" class="btn btn-lg btn-danger" onclick="sun_show()">Show</button>
            <button type="button" class="btn btn-lg btn-danger" onclick="sun_destroy()">Destroy</button>
            <button type="button" class="btn btn-lg btn-danger" onclick="sun_create()">Create</button>
        </form>
        <p></p>

        <h4>3. Image upload to server</h4>
        <div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> suneditor <span class="pl-k">=</span> <span class="pl-c1">SUNEDITOR</span>.<span class="pl-en">create</span>(<span class="pl-s"><span class="pl-pds">'</span>sample<span class="pl-pds">'</span></span>,{
    imageUploadUrl<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">"</span>/editor/uploadImage.ajax<span class="pl-pds">"</span></span>
});</pre></div>

        <h4>3-1. Sample) Java</h4>
        <div class="highlight highlight-source-java"><pre><span class="pl-k">package</span> <span class="pl-smi">suneditor.test.controller</span>;

<span class="pl-k">import</span> <span class="pl-smi">org.json.simple.JSONArray</span>;
<span class="pl-k">import</span> <span class="pl-smi">org.json.simple.JSONObject</span>;
<span class="pl-k">import</span> <span class="pl-smi">org.springframework.stereotype.Controller</span>;
<span class="pl-k">import</span> <span class="pl-smi">org.springframework.web.bind.annotation.RequestMapping</span>;
<span class="pl-k">import</span> <span class="pl-smi">org.springframework.web.multipart.MultipartFile</span>;
<span class="pl-k">import</span> <span class="pl-smi">org.springframework.web.multipart.MultipartHttpServletRequest</span>;

<span class="pl-k">import</span> <span class="pl-smi">javax.servlet.http.HttpServletResponse</span>;
<span class="pl-k">import</span> <span class="pl-smi">java.io.File</span>;
<span class="pl-k">import</span> <span class="pl-smi">java.io.PrintWriter</span>;
<span class="pl-k">import</span> <span class="pl-smi">java.util.*</span>;

<span class="pl-k">@Controller</span>
<span class="pl-k">public</span> <span class="pl-k">class</span> <span class="pl-en">SuneditorImgUploadController</span> {

    <span class="pl-k">@RequestMapping</span>(<span class="pl-c1">value</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>/editor/uploadImage.ajax<span class="pl-pds">"</span></span>)
    <span class="pl-k">public</span> <span class="pl-k">void</span> <span class="pl-en">uploadImg</span>(<span class="pl-smi">MultipartHttpServletRequest</span> <span class="pl-v">request</span>, <span class="pl-smi">HttpServletResponse</span> <span class="pl-v">response</span>) {
        <span class="pl-smi">JSONArray</span> jsonArray <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-smi">JSONArray</span>();
        <span class="pl-smi">String</span> filePath <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>/download/editorImg/<span class="pl-pds">"</span></span>;

        <span class="pl-k">try</span> {
            <span class="pl-smi">MultipartHttpServletRequest</span> multipartHttpServletRequest <span class="pl-k">=</span> (<span class="pl-smi">MultipartHttpServletRequest</span>)request;
            <span class="pl-k">Iterator&lt;<span class="pl-smi">String</span>&gt;</span> iterator <span class="pl-k">=</span> multipartHttpServletRequest<span class="pl-k">.</span>getFileNames();

            <span class="pl-smi">String</span> realfilePath <span class="pl-k">=</span> request<span class="pl-k">.</span>getSession()<span class="pl-k">.</span>getServletContext()<span class="pl-k">.</span>getRealPath(<span class="pl-s"><span class="pl-pds">"</span>/<span class="pl-pds">"</span></span>) <span class="pl-k">+</span> filePath;

            <span class="pl-smi">MultipartFile</span> multipartFile <span class="pl-k">=</span> <span class="pl-c1">null</span>;
            <span class="pl-smi">String</span> originalFileName <span class="pl-k">=</span> <span class="pl-c1">null</span>;
            <span class="pl-smi">String</span> originalFileExtension <span class="pl-k">=</span> <span class="pl-c1">null</span>;
            <span class="pl-smi">String</span> storedFileName <span class="pl-k">=</span> <span class="pl-c1">null</span>;

            <span class="pl-smi">File</span> file <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-smi">File</span>(realfilePath);

            <span class="pl-k">if</span>(file<span class="pl-k">.</span>exists() <span class="pl-k">==</span> <span class="pl-c1">false</span>){
                file<span class="pl-k">.</span>mkdirs();
            }

            <span class="pl-k">while</span>(iterator<span class="pl-k">.</span>hasNext()){
                <span class="pl-k">List&lt;<span class="pl-smi">MultipartFile</span>&gt;</span> multiFiles <span class="pl-k">=</span> multipartHttpServletRequest<span class="pl-k">.</span>getMultiFileMap()<span class="pl-k">.</span>get(multipartHttpServletRequest<span class="pl-k">.</span>getFile(iterator<span class="pl-k">.</span>next())<span class="pl-k">.</span>getName());
                <span class="pl-k">for</span>(<span class="pl-k">int</span> i<span class="pl-k">=</span><span class="pl-c1">0</span>; i<span class="pl-k">&lt;</span>multiFiles<span class="pl-k">.</span>size(); i<span class="pl-k">++</span>){
                    multipartFile <span class="pl-k">=</span> multiFiles<span class="pl-k">.</span>get(i);
                    <span class="pl-smi">JSONObject</span> jsonObj <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-smi">JSONObject</span>();

                    <span class="pl-k">if</span>(multipartFile<span class="pl-k">.</span>isEmpty() <span class="pl-k">==</span> <span class="pl-c1">false</span>){
                        originalFileName <span class="pl-k">=</span> multipartFile<span class="pl-k">.</span>getOriginalFilename();

                        <span class="pl-k">try</span>{
                            originalFileExtension <span class="pl-k">=</span> originalFileName<span class="pl-k">.</span>substring(originalFileName<span class="pl-k">.</span>lastIndexOf(<span class="pl-s"><span class="pl-pds">"</span>.<span class="pl-pds">"</span></span>));
                        } <span class="pl-k">catch</span>(<span class="pl-smi">Exception</span> e){
                            originalFileExtension <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>;
                        }

                        storedFileName <span class="pl-k">=</span> <span class="pl-c1">UUID</span><span class="pl-k">.</span>randomUUID()<span class="pl-k">.</span>toString()<span class="pl-k">.</span>replaceAll(<span class="pl-s"><span class="pl-pds">"</span>-<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>) <span class="pl-k">+</span> originalFileExtension;

                        file <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-smi">File</span>(realfilePath <span class="pl-k">+</span> storedFileName);
                        multipartFile<span class="pl-k">.</span>transferTo(file);

                        jsonObj<span class="pl-k">.</span>put(<span class="pl-s"><span class="pl-pds">"</span>SUNEDITOR_IMAGE_SRC<span class="pl-pds">"</span></span>, filePath <span class="pl-k">+</span> storedFileName);
                        jsonArray<span class="pl-k">.</span>add(jsonObj);
                    }
                }
            }

            <span class="pl-smi">PrintWriter</span> wrt <span class="pl-k">=</span> response<span class="pl-k">.</span>getWriter();

            wrt<span class="pl-k">.</span>print(jsonArray);
            wrt<span class="pl-k">.</span>flush();
            wrt<span class="pl-k">.</span>close();

        } <span class="pl-k">catch</span> (<span class="pl-smi">Exception</span> e) {
            e<span class="pl-k">.</span>printStackTrace();
        }
    }
}</pre></div>

    </article>

    <footer>
        <p>Suneditor create by JiHong.Lee</p>
        <p>Based on javascript</p>
        <p>Suneditor distributed under the MIT license.</p>
        <p><a href="https://github.com/JiHong88/SunEditor" target="_blank" style="color:#f4b124;">go to GitHub suneditor</a></p>
    </footer>
</div>

<script>
    SUNEDITOR.create('exampleOptions',{
        fontSizeList : [
            8, 10, 14, 18, 24, 36
        ],
        fontList : [
            'Arial',
            'tahoma',
            'Courier New,Courier'
        ],
        addFont : [
            'Times New Roman,Times,serif',
            'Trebuchet MS,Helvetica,sans-serif'
        ],
        width : '100%',
        height : '150px',
        videoX : 360,
        videoY : 115,
        imageSize : 150,
        buttonList : [
            ['font', 'fontSize'],
            [
                {
                    buttonClass:'',
                    title:SUNEDITOR.lang.toolbar.image,
                    dataCommand:'image',
                    dataDisplay:'dialog',
                    displayOption:'full',
                    innerHTML:'<div class="ico_picture"></div>'
                },
                'video'
            ]
        ]
    });

    var suneditor = SUNEDITOR.create('exampleFunction');

    function sun_save() {
        suneditor.save();
        document.getElementById('frm').submit();
    }

    function sun_getContent() {
        var content = suneditor.getContent();
        alert(content);
    }

    function sun_setContent(content) {
        suneditor.setContent(content);
    }

    function sun_appendContent(content) {
        suneditor.appendContent(content);
    }

    function sun_disabled() {
        suneditor.disabled();
    }

    function sun_enabled() {
        suneditor.enabled();
    }

    function sun_show() {
        suneditor.show();
    }

    function sun_hide() {
        suneditor.hide();
    }

    function sun_destroy() {
        suneditor.destroy();
    }

    function sun_create() {
        suneditor = SUNEDITOR.create('exampleFunction');
    }
</script>
</body>
</html>